<div class="row">
	<div class="span6">
		<?php echo $this->Html->image('filters/input.jpg', array('id' => 'img-process', 'class' => 'img-polaroid', 'width' => 600)) ?>
	</div>
	<div class="span6">
		<div class="row-fluid">
			<div class="span3" style="text-align: center">
				<a id="reset" href="javascript:void(0)">
					<?php echo $this->Html->image('thumbnail/thumbnail.jpg', array('id' => 'img-process', 'class' => 'img-rounded')) ?>
				</a>
				<b>
					Reset
				</b>
			</div>
			<div class="span3" style="text-align: center">
				<a id="beauty" class="filter" href="javascript:void(0)">
					<?php echo $this->Html->image('thumbnail/beauty.jpg', array('id' => 'img-process', 'class' => 'img-rounded')) ?>
				</a>
				<b>
					Beauty
				</b>
			</div>
			<div class="span3" style="text-align: center">
				<a id="bright" class="filter" href="javascript:void(0)">
					<?php echo $this->Html->image('thumbnail/bright.jpg', array('id' => 'img-process', 'class' => 'img-rounded')) ?>
				</a>
				<b>
					Bright
				</b>
			</div>
			<div class="span3" style="text-align: center">
				<a id="brownish" class="filter" href="javascript:void(0)">
					<?php echo $this->Html->image('thumbnail/brownish.jpg', array('id' => 'img-process', 'class' => 'img-rounded')) ?>
				</a>
				<b>
					Brownish
				</b>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span3" style="text-align: center">
				<a id="chrome" class="filter" href="javascript:void(0)">
					<?php echo $this->Html->image('thumbnail/chrome.jpg', array('id' => 'img-process', 'class' => 'img-rounded')) ?>
				</a>
				<b>
					Chrome
				</b>
			</div>
			<div class="span3" style="text-align: center">
				<a id="griseous" class="filter" href="javascript:void(0)">
					<?php echo $this->Html->image('thumbnail/griseous.jpg', array('id' => 'img-process', 'class' => 'img-rounded')) ?>
				</a>
				<b>
					Griseous
				</b>
			</div>
			<div class="span3" style="text-align: center">
				<a id="happytear" class="filter" href="javascript:void(0)">
					<?php echo $this->Html->image('thumbnail/happytear.jpg', array('id' => 'img-process', 'class' => 'img-rounded')) ?>
				</a>
				<b>
					Happytear
				</b>
			</div>
			<div class="span3" style="text-align: center">
				<a id="inkwash" class="filter" href="javascript:void(0)">
					<?php echo $this->Html->image('thumbnail/inkwash.jpg', array('id' => 'img-process', 'class' => 'img-rounded')) ?>
				</a>
				<b>
					Inkwash
				</b>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span3" style="text-align: center">
				<a id="instant" class="filter" href="javascript:void(0)">
					<?php echo $this->Html->image('thumbnail/instant.jpg', array('id' => 'img-process', 'class' => 'img-rounded')) ?>
				</a>
				<b>
					Instant
				</b>
			</div>
			<div class="span3" style="text-align: center">
				<a id="lomo" class="filter" href="javascript:void(0)">
					<?php echo $this->Html->image('thumbnail/lomo.jpg', array('id' => 'img-process', 'class' => 'img-rounded')) ?>
				</a>
				<b>
					Lomo
				</b>
			</div>
			<div class="span3" style="text-align: center">
				<a id="nostalgia" class="filter" href="javascript:void(0)">
					<?php echo $this->Html->image('thumbnail/nostalgia.jpg', array('id' => 'img-process', 'class' => 'img-rounded')) ?>
				</a>
				<b>
					Nostalgia
				</b>
			</div>
			<div class="span3" style="text-align: center">
				<a id="retro" class="filter" href="javascript:void(0)">
					<?php echo $this->Html->image('thumbnail/retro.jpg', array('id' => 'img-process', 'class' => 'img-rounded')) ?>
				</a>
				<b>
					Retro
				</b>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span3" style="text-align: center">
				<a id="richtone" class="filter" href="javascript:void(0)">
					<?php echo $this->Html->image('thumbnail/richtone.jpg', array('id' => 'img-process', 'class' => 'img-rounded')) ?>
				</a>
				<b>
					Richtone
				</b>
			</div>
			<div class="span3" style="text-align: center">
				<a id="sunrise" class="filter" href="javascript:void(0)">
					<?php echo $this->Html->image('thumbnail/sunrise.jpg', array('id' => 'img-process', 'class' => 'img-rounded')) ?>
				</a>
				<b>
					Sunrise
				</b>
			</div>
			<div class="span3" style="text-align: center">
				<a id="vibrant" class="filter" href="javascript:void(0)">
					<?php echo $this->Html->image('thumbnail/vibrant.jpg', array('id' => 'img-process', 'class' => 'img-rounded')) ?>
				</a>
				<b>
					Vibrant
				</b>
			</div>
			<div class="span3" style="text-align: center">
				<a id="xpro" class="filter" href="javascript:void(0)">
					<?php echo $this->Html->image('thumbnail/xpro.jpg', array('id' => 'img-process', 'class' => 'img-rounded')) ?>
				</a>
				<b>
					Xpro
				</b>
			</div>
		</div>
	</div>
</div>

<?php echo $this->Html->scriptStart(array('inline' => false)) ?>
	$('#reset').click(function(){
		$('#img-process').attr('src', '<?php echo $this->Html->url('/img/filters/input.jpg', true) ?>');
		return true;
	});
	$('.filter').click(function(){
		var filter = this.id;
		$.ajax({
			'url': '<?php echo $this->Html->url(array('controler' => 'filters', 'action' => 'filter')) ?>',
			'data': {'filter': filter},
			'success': function(response) {
				console.log($.trim(response));
				$('#img-process').attr('src', '<?php echo $this->Html->url('/img/filters/', true) ?>' + $.trim(response));
			}
		});
		
		return true;
	});
<?php echo $this->Html->scriptEnd(); ?>
